<!--
 * @Author: qm
 * @Date: 2020-12-02 12:00:00
 * @LastEditors: qm
 * @LastEditTime: 2020-12-02 12:00:00
 * @Description:
-->

<template>
  <div class="scanner">
    <van-nav-bar title="拣货交接" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row style="margin-top: 0.5rem;" type="flex" justify="center">
      <van-col>
        <van-cell-group>
          <van-field v-model="formItem.aisle" placeholder="请扫描通道号" id="aisle" ref="aisle" @keyup.enter.native="onClickAisle" />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="formItem.skuCartonNo"
            placeholder="请扫描料箱号"
            id="skuCartonNo"
            ref="skuCartonNo"
            @keyup.enter.native="onClickSkuCartonNo"
          />
        </van-cell-group>
        <div v-for="(item, index) in pickList" :key="index">
          <van-cell
            :title="item.pickTaskCode + ' - ' + item.bussType + ' - ' + item.orderType + ' - ' + item.aisle + '-' + item.brandCode"
            :label="item.date"
          />
        </div>
        <van-cell :title="pickSumvalue"> </van-cell>
        <van-cell :title="whoUser"> {{ userData.bizUserName }}</van-cell>
      </van-col>
    </van-row>
    <van-row style="margin-top: 0.5rem;" type="flex" justify="center"> </van-row>
    <van-tabbar>
      <van-tabbar-item @click="continueOrders">确定接单</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
// import { ScanHandDetail } from "@/api/pickScan/pickTaskDetail";
export default {
  name: "pickScanHandOver",
  mounted() {
    this.user.name = this.userData.sysUserLoginName;
  },
  computed: {
    ...mapGetters("scanner", ["pdaScanData"]),
    ...mapGetters("user", ["userData"])
  },

  data() {
    return {
      relId: "",
      pickList: [],
      formItem: {
        skuCartonNo: "",
        pickCarNo: "",
        barCode: "",
        aisle: ""
      },
      whoUser: "当前操作人：",
      data1: "当前无任务或者任务已经关闭",
      pickSumvalue: "",
      pickvalue: "拣货任务号-",
      pickDetailvalue: " B2C-单件-过道组合 A区高位货架-欧时力品牌",
      value: 1
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "b2cpickScan"
      });
    },

    onClickAisle() {
      this.$nextTick(() => {
        this.$refs["skuCartonNo"].focus();
      });
    },

    onClickSkuCartonNo() {
      if (this.formItem.aisle == "" && this.formItem.skuCartonNo == "") {
        this.$toast.fail("请扫描通道号和料箱号");
      } else {
        ScanHandDetail(this.formItem.aisle, this.formItem.skuCartonNo)
          .then(response => {
            if (response.data.status) {
              this.pickList = response.data.data;
              if (this.pickList.length > 1) {
                this.relId = response.data.data[0].relId;
              } else {
                this.relId = response.data.data.relId;
              }
            } else {
              console.log(response);
            }
          })
          .catch(() => {
            this.$toast.fail("请求出错！");
          });
      }
    },

    continueOrders() {
      if (this.pickList.length == 0 || this.formItem.aisle.length == 0) {
        this.$notify({type: "warning", message: "无单可接！"});
      } else {
        this.$router.push({
          name: "taskManageHomeDetail",
          params: {
            id: this.relId,
            aisle: this.formItem.aisle
          }
        });
      }
    }
  }
};
</script>
